<template>
  <!-- 登录页面直接渲染，占据整个屏幕 -->
  <template v-if="$route.path === '/login'">
    <router-view />
  </template>
  
  <!-- 其他页面显示侧边栏和头部布局 -->
  <template v-else>
    <el-container class="layout-container">
      <el-aside width="250px" class="sidebar">
        <div class="logo">
          <h2>知识付费管理系统</h2>
        </div>
        <el-scrollbar height="calc(100vh - 60px)">
          <el-menu
            :default-active="$route.path"
            class="sidebar-menu"
            router
            background-color="#304156"
            text-color="#bfcbd9"
            active-text-color="#409EFF"
            :unique-opened="false"
          >
            <el-menu-item index="/dashboard">
              <el-icon><Odometer /></el-icon>
              <span>系统首页</span>
            </el-menu-item>

            <el-menu-item index="/course-shop">
              <el-icon><ShoppingCart /></el-icon>
              <span>课程购买</span>
            </el-menu-item>

            <el-sub-menu index="course">
              <template #title>
                <el-icon><Collection /></el-icon>
                <span>课程管理</span>
              </template>
              <el-menu-item index="/live">
                <el-icon><VideoCamera /></el-icon>
                <span>直播管理</span>
              </el-menu-item>
              <el-menu-item index="/photo">
                <el-icon><Picture /></el-icon>
                <span>图文课程管理</span>
              </el-menu-item>
              <el-menu-item index="/video">
                <el-icon><VideoPlay /></el-icon>
                <span>视频课程管理</span>
              </el-menu-item>
              <el-menu-item index="/audio">
                <el-icon><Microphone /></el-icon>
                <span>音频课程管理</span>
              </el-menu-item>
              <el-menu-item index="/column">
                <el-icon><Collection /></el-icon>
                <span>专栏课程管理</span>
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="goods">
              <template #title>
                <el-icon><Goods /></el-icon>
                <span>实物商品</span>
              </template>
              <el-menu-item index="/goods">
                <el-icon><Goods /></el-icon>
                <span>商品管理</span>
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="marketing">
              <template #title>
                <el-icon><TrendCharts /></el-icon>
                <span>营销管理</span>
              </template>
              <el-menu-item index="/marketing/seckill">
                <el-icon><Timer /></el-icon>
                <span>秒杀</span>
              </el-menu-item>
              <el-menu-item index="/marketing/group">
                <el-icon><UserFilled /></el-icon>
                <span>拼团</span>
              </el-menu-item>
              <el-menu-item index="/marketing/full">
                <el-icon><Discount /></el-icon>
                <span>满减满折</span>
              </el-menu-item>
              <el-menu-item index="/marketing/give">
                <el-icon><Present /></el-icon>
                <span>满赠</span>
              </el-menu-item>
              <el-menu-item index="/marketing/limit">
                <el-icon><Clock /></el-icon>
                <span>限时折扣</span>
              </el-menu-item>
              <el-menu-item index="/marketing/scene">
                <el-icon><Location /></el-icon>
                <span>场景营销</span>
              </el-menu-item>
              <el-menu-item index="/menu">
                <el-icon><Menu /></el-icon>
                <span>套餐</span>
              </el-menu-item>
              <el-menu-item index="/marketing/shipping">
                <el-icon><Van /></el-icon>
                <span>包邮</span>
              </el-menu-item>
              <el-menu-item index="/cashback">
                <el-icon><Money /></el-icon>
                <span>订单返现</span>
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="order">
              <template #title>
                <el-icon><Document /></el-icon>
                <span>订单管理</span>
              </template>
              <el-menu-item index="/bill">
                <el-icon><Document /></el-icon>
                <span>订单查询</span>
              </el-menu-item>
            </el-sub-menu>

            <el-menu-item v-if="isAdmin" index="/assets">
              <el-icon><Wallet /></el-icon>
              <span>资产管理</span>
            </el-menu-item>

            <el-menu-item v-if="isAdmin" index="/users">
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </el-menu-item>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-container>
        <el-header class="header">
          <div class="header-content">
            <h3>{{ currentPageTitle }}</h3>
            <div class="user-info">
              <el-dropdown>
                <span class="el-dropdown-link">
                  {{ displayName }}
                  <el-icon class="el-icon--right"><ArrowDown /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </el-header>
        <el-main class="main-content">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </template>
</template>

<script setup>
import { computed, ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Odometer, User, Goods, Microphone, VideoPlay, Collection, VideoCamera, ArrowDown, TrendCharts, Timer, Money, Document, Wallet, UserFilled, Discount, Picture, Menu, Present, Clock, Location, Van, ShoppingCart} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 检查当前用户类型
const userType = ref('')
const isAdmin = computed(() => userType.value === 'admin')

// 检查用户类型
const checkUserType = () => {
  userType.value = localStorage.getItem('userType') || ''
}

onMounted(() => {
  checkUserType()
  
  // 监听localStorage的变化
  window.addEventListener('storage', () => {
    checkUserType()
  })
})

// 监听路由变化重新检查用户类型
watch(route, () => {
  checkUserType()
}, { immediate: false })

const pageTitleMap = {
  '/dashboard': '系统首页',
  '/course-shop': '课程购买',
  '/users': '用户管理',
  '/photo': '图文课程管理',
  '/goods': '商品管理',
  '/audio': '音频课程',
  '/video': '视频课程',
  '/column': '课程专栏',
  '/live': '直播课程',
  '/marketing/seckill': '秒杀',
  '/marketing/group': '拼团',
  '/marketing/full': '满减满折',
  '/marketing/give': '满赠',
  '/marketing/limit': '限时折扣',
  '/marketing/scene': '场景营销',
  '/marketing/shipping': '包邮',
  '/menu': '套餐',
  '/bill': '订单查询',
  '/assets': '资产管理',
  '/cashback': '订单返现'
}

const currentPageTitle = computed(() => {
  return pageTitleMap[route.path] || '知识付费管理系统'
})

// 获取显示的用户名或角色名
const displayName = computed(() => {
  if (isAdmin.value) {
    return '管理员'
  } else {
    // 普通用户显示账号
    const userInfo = localStorage.getItem('userInfo')
    if (userInfo) {
      try {
        const userData = JSON.parse(userInfo)
        return userData.account || '用户'
      } catch (e) {
        return '用户'
      }
    }
    return '用户'
  }
})

// 退出登录
const handleLogout = async () => {
  try {
    await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    // 清除本地存储
    localStorage.removeItem('token')
    localStorage.removeItem('userInfo')
    localStorage.removeItem('userType')
    localStorage.removeItem('isLoggedIn')
    
    // 重置用户类型状态
    userType.value = ''
    
    ElMessage.success('已退出登录')
    router.push('/login')
  } catch (error) {
    // 用户取消退出
  }
}
</script>

<style scoped>
.layout-container {
  height: 100vh;
}

.sidebar {
  background-color: #304156;
  color: white;
}

.logo {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #434a50;
}

.logo h2 {
  color: white;
  font-size: 18px;
  font-weight: 600;
}

.sidebar-menu {
  border-right: none;
}

:deep(.el-sub-menu__title) {
  font-weight: 500;
}

:deep(.el-menu) {
  border-right: none;
}

.header {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  padding: 0;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;
}

.header-content h3 {
  margin: 0;
  color: #333;
}

.user-info {
  display: flex;
  align-items: center;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
  display: flex;
  align-items: center;
}

.main-content {
  background-color: #f5f5f5;
  padding: 0;
}
</style>